<script lang="ts">
export default {
  name: "engineerOrderList"
}
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, getCurrentInstance } from 'vue';
import { TableInstance } from 'element-plus'
import {
  getEngineerOrderList
} from '@/api/engineer/index';
import { engineerOrderExport } from "@/api/system/withdrawal/index"
import {EngineerOrder, EngineerOrderQuery} from "@/api/engineer/types";
import {Download} from "@element-plus/icons-vue";
const dataTableRef = ref<TableInstance>()
const { proxy }: any = getCurrentInstance();
defineExpose({
  open
});
const state = reactive({
  dialog: {
    title: '工程师订单列表',
    visible: false,
  } as DialogType,
  queryParams: {
    engineerId: undefined,
    pageNum: 1,
    pageSize: 10,
  } as EngineerOrderQuery,
  engineerOrderList: [] as EngineerOrder[],
  total: 0,
  loading: true,
})

let {
  dialog,
  queryParams,
  engineerOrderList,
  total,
  loading
} = toRefs(state);


function cancel() {
  dialog.value.visible = false;
}

async function handleQuery() {
  loading.value = true;
  let {data} = await getEngineerOrderList(queryParams.value);
  state.engineerOrderList = data.list;
  state.total = data.total;
  state.loading = false;
}

function open(engineerId:number) {
  console.log("row", engineerId)
  dialog.value.visible = true;
  queryParams.value.engineerId = engineerId
  handleQuery()
}

function handleExport() {
  engineerOrderExport(queryParams.value).then((response: any) => {
    const blob = new Blob([response.data], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
    });
    const a = document.createElement('a');
    const href = window.URL.createObjectURL(blob); // 下载的链接
    a.href = href;
    a.download = decodeURI(
      response.headers['content-disposition'].split(';')[1].split('=')[1]
    ); // 获取后台设置的文件名称
    document.body.appendChild(a);
    a.click(); // 点击导出
    document.body.removeChild(a); // 下载完成移除元素
    window.URL.revokeObjectURL(href); // 释放掉blob对象
  });
}

</script>

<template>
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="1200px" heigh=t destroy-on-close @close="cancel">
    <el-button
      :icon="Download"
      style="margin-bottom: 12px"
      @click="handleExport"
    >导出</el-button>
    <el-card>
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="engineerOrderList"
        height="400"
        highlight-current-row
        border
      >
<!--        <el-table-column type="selection" width="55" align="center" />-->
        <el-table-column label="订单编号" prop="orderCode" width="150" />
        <el-table-column label="用工标题" prop="name" min-width="150" />
        <el-table-column label="用工类型" prop="typeName" width="160" />
        <el-table-column label="服务标签" prop="labelName" width="190">
          <template #default="scope">
            <p v-if="!scope.row.labelName">无</p>
            <el-tag
              style="margin-left: 2px"
              v-else
              v-for="item in scope.row.labelName.split(',')"
              :key="item"
            >{{ item }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="下单类型"
          prop="principalTypeName"
          width="160"
        />
        <el-table-column label="下单名称" prop="principalName" width="200" />
        <el-table-column label="下单账号" prop="principalAccountName" width="200" />
        <el-table-column label="用工地址" prop="address" width="160" />
        <el-table-column label="用工时间" prop="orderStatr" width="280">
          <template #default="scope">
            <span>{{ scope.row.orderStatr + ' / ' + scope.row.orderEnd }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用工人数" prop="orderQuantity" width="160" />
        <el-table-column label="抢单人数" prop="qdQuantity" width="160"/>
        <el-table-column label="用工金额" prop="settlementMoney" width="160"/>
        <el-table-column label="用工总金额" prop="orderMoney" width="160">
          <template #default="scope">
            <span>{{
                (scope.row.orderQuantity * scope.row.price).toFixed(2)
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已提现金额" prop="withdrawnAmount" width="160"/>
        <el-table-column label="未提现金额" prop="withdrawnAmountOnNo" width="160"/>
      </el-table>

      <!-- pagination -->
      <pagination
        v-if="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
  </el-dialog>
</template>

<style scoped>

</style>
